<template>
    <div class="new-article">
        <span>文章标题：</span>
        <div class="input">
            <input type="text" placeholder="请输入文章标题" v-model="articleTitle"/>
        </div>
        <span>文章详情：</span>
        <div class="textarea">
            <textarea rows="10" placeholder="请输入文章详情" v-model="articleDetail"></textarea>
        </div>
        <a-button type="primary" style="margin-bottom: 30px" @click="publish">发表文章</a-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default defineComponent({
    name: 'new-article',
    setup() {
        const store = useStore();
        const router = useRouter();
        const articleTitle = ref('');
        const articleDetail = ref('');
        const publish = () =>{
            store.commit('article', {
                id: 4,
                title: articleTitle.value,
                content: articleDetail.value,
                createdAt: new Date().toLocaleString(),
                columnId:1
            });
            router.push(`/column-detail/1`);
        };
        return {
            articleTitle,
            articleDetail,
            publish
        }
    }
})
</script>

<style lang="less" scoped>
.new-article {
    width: 1200px;
    margin: auto;
    span {
        color: #212529;
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 10px;
        display: inline-block;
    }
    .input {
        width: 100%;
        height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
        border: 1px solid #dee2e6;
        input {
            outline: none;
            border: 0px;
            width: 100%;
            height: 38px;
        }
    }
    .textarea {
        width: 100%;
        padding-left: 10px;
        box-sizing: border-box;
        border: 1px solid #dee2e6;
        margin-bottom: 20px;
        textarea {
            outline: none;
            border: 0px;
            width: 100%;
        }
    }
}
</style>